<template>
    <div>
        <!-- 面包屑导航 -->
        <elBread></elBread>
        <!-- 添加按钮 -->
        <el-button  @click="add" type="primary" plain>添加</el-button>
        <!-- 表格 -->
        <list @edit="edit"></list>
        <!-- 弹窗 -->
        <dia-log  ref="diaRef" :isShow="isShow" :isAdd="isAdd" @cancel="cancel"></dia-log>

    </div>
</template>
<script lang='ts' setup>
import elBread from '@/components/el-bread.vue';
import diaLog from './dialog.vue'
import list from './list.vue'
import { ref } from 'vue';

let diaRef = ref();
// 弹窗状态
let isShow = ref(false);
// 是否为添加
let isAdd = ref(true);

// 弹出弹窗
const add = ()=>{
    isAdd.value = true;
    isShow.value = true;
}

// 关闭弹窗
const cancel = ()=>{
    isShow.value = false;
}

// 编辑
const edit = (uid:number)=>{
    isAdd.value = false;
    isShow.value = true;
    // 调用子组件的方法
    diaRef.value.lookup(uid);
}
</script>
<style scoped lang='less'>
.el-button {
    margin: 20px 0 10px;
}
</style>